import React from 'react'
import { nanoid } from 'nanoid'
import './index.css';
import Header from '../header';
import List from '../list';
import Footer from '../footer';

export default class Wrapper extends React.Component {
    mKeyUpData = (data) => {
        const obj = { id: nanoid(), name: data, isCheck: false }
        this.setState({ todoList: [obj, ...this.state.todoList] })
    }
    state = {
        todoList: [
            { id: nanoid(), name: "123456", isCheck: false },
            { id: nanoid(), name: "adgfsfs", isCheck: false },
            { id: nanoid(), name: "dsfdfsf", isCheck: false }
        ]
    }
    removeItem = (itemId) => {
        const data = this.state.todoList.filter((item) => {
            return itemId !== item.id
        })
        this.setState({ todoList: data })
    }
    checkItem = (itemId, status) => {
        const data = this.state.todoList.filter((item) => {
            if (itemId === item.id) {
                item.isCheck = status
            }
            return item
        })
        this.setState({ todoList: data })
    }
    clearAllDone = () => {
        const data = this.state.todoList.filter((item) => {
            return item.isCheck !== true
        })
        this.setState({ todoList: data })
    }
    checkAll = (e) => {
        const data = this.state.todoList.filter((item) => {
            item.isCheck = e;
            return item
        })
        this.setState({ todoList: data })
    }
    render () {
        return (
            <div className="wrapper">
                <Header mKeyUpData={this.mKeyUpData} />
                <List  {...this.state} removeItem={this.removeItem} checkItem={this.checkItem} />
                <Footer {...this.state} clearAllDone={this.clearAllDone} checkAll={this.checkAll} />
            </div>
        )
    }
}